<template>
	<view class="user__list u-f-ac animate__animated animate__fadeInLeft animate__fast">
		<image :src="item.userpic" mode="widthFix" lazy-load/>
		<view class="user__list__info u-f">
			<text class="user__list__info--title">{{item.username}}</text>
			<tagSexAge :sex="item.sex" :age="item.age"/>
		</view>
		<text class="icon iconfont icon-check-circle-filled user__list__selected" v-if="item.isguanzhu"></text>
		<text class="icon iconfont icon-close-circle-filled user__list__r" v-else></text>
	</view>
</template>

<script setup>
	import tagSexAge from '../common/tag-sex-age.vue';
	const props = defineProps({
		item:{
			type:Object,
			required:true,
		}
	})
</script>

<style scoped lang="scss">
	.user__list {
		justify-content: space-between;
		box-sizing: border-box;
		padding: 30upx 20upx;
		border-bottom: 1upx solid #ccc;
		>image {
			width: 100upx;
			height: 100upx;
			border-radius: 50%;
			margin-right: 30upx;
		}
		&__info {
			flex-direction: column;
			align-items: flex-start;
			flex: 1;
			text-align: left;
			&--title{
				font-size: 36upx;
				line-height: 70upx;
				font-weight: 600;
			}
		}
		&__selected {
			color: #ccc;
			font-size: 50upx;
		}
		&__r {
			display: inline-block;
			transform: rotate(45deg);
			color: #F8791B;
			font-size: 50upx;
		}
		
	}
	
</style>
